<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <title>汽车详情</title>
    <link rel="shortcut icon" href="#"/>
    <link rel="stylesheet" href="../element-ui/element.css">
    <link rel="stylesheet" type="text/css" href="../../bootstrap/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/cln/css/carbase.css"/>
</head>
<body>
<script src="../../vue/vue.js"></script>
<script src="../../vue/vue.min.js"></script>
<script src="../element-ui/element.js"></script>
<script src="../../jquery/jquery-3.4.1.js"></script>
<script src="../../bootstrap/js/bootstrap.min.js"></script>
<div id="main" style="line-height:20px;height: 20px;cursor: pointer;margin: 20px 0px">
    <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item onclick="main()" class="main">首页</el-breadcrumb-item>
        <el-breadcrumb-item onclick="car()" class="main">看看车吧</el-breadcrumb-item>
        <el-breadcrumb-item>汽车详情</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="container">
        <div class="row">
            <div class="left col-lg-6 col-md-6 col-sm-1" id="carImg"></div>
            <div class="right col-lg-6 col-md-6 col-sm-1">
                <h2 id="h2"></h2>
                <div class="clear"></div>
                <div class="list">
                    <ul>
                        <li><label>级　别：</label><span id="clevel"></span></li>
                        <li><label>油　耗：</label><span id="oil"></span></li>
                        <li><label>质　保：</label><span id="quality"></span></li>
                    </ul>
                    <ul>
                        <li><label>排　量：</label><span id="displacement"></span></li>
                        <li><label>变速箱：</label><span id="gearbox"></span></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="clear"></div>
        <p class="text">汽车配置参数</p>
        <table width="90%" border="0" cellspacing="0" cellpadding="0" class="deploy_tb">
            <tr class="deploy_hd">
                <td colspan="4"><span>发动机</span></td>
            </tr>
            <tr class="deploy_tr">
                <td class="w148 bdl">排量</td>
                <td id="edisplacement" class="w237"></td>
                <td class="w148 bdl">进气形式</td>
                <td id="einlet" class="w237"></td>
            </tr>
            <tr class="deploy_tr">
                <td class="w148 bdl">汽缸排列形式</td>
                <td id="ectype" class="w237"></td>
                <td class="w148 bdl">汽缸数</td>
                <td id="ecnum" class="w237"></td>
            </tr>
        </table>
        <table width="90%" border="0" cellspacing="0" cellpadding="0" class="deploy_tb">
            <tr class="deploy_cn">
                <td colspan="4"><span>变速箱</span></td>
            </tr>
            <tr class="deploy_tr">
                <td class="w148 bdl">变速箱名称</td>
                <td id="gName" class="w237"></td>
                <td class="w148 bdl">变速箱类型</td>
                <td id="gType" class="w237"></td>
            </tr>
            <tr class="deploy_tr">
                <td class="w148 bdl">挡位个数</td>
                <td id="gNum" class="w237"></td>
                <td class="w148 bdl"></td>
                <td class="w237"></td>
            </tr>
        </table>
    </div>
    <el-footer style="text-align: center;margin-top: 20px"> Copyright © 2016-2017, snncar.com,All Rights Reserved 皖ICP备16022456号-1</el-footer>
</div>
</body>
<script>
    var baseId;

    function getCar() {
        var carId = sessionStorage.getItem("carId");
        $.ajax({
            type: 'post',
            url: '/forum/car/selectCarById',
            dataType: 'json',
            data: {carId: carId},
            success: function (data) {
                console.log(data);
                $('#carImg').html("<img src='http://q9y68y4j5.bkt.clouddn.com/" + data.data.carImg + "'>");
                $('#h2').append(data.data.carType);
                baseId = data.data.baseId;
                getBase();
            }
        })
    }

    function getBase() {
        $.ajax({
            type: 'post',
            url: '/forum/base/selectBaseById',
            dataType: 'json',
            data: {baseId: baseId},
            success: function (data) {
                console.log(data);
                $('#clevel').append(data.data.carlevel);
                $('#oil').append(data.data.oilConsumption);
                $('#displacement').append(data.data.displacement);
                $('#quality').append(data.data.quality);
                $('#gearbox').append(data.data.gearbox);
                var eId = data.data.eId;
                var gId = data.data.gId;
                getEngine(eId);
                getGearbox(gId);
            }
        })
    }

    function getEngine(eId) {
        $.ajax({
            type: 'post',
            url: '/forum/engine/selectEngineById',
            dataType: 'json',
            data: {eId: eId},
            success: function (data) {
                console.log(data);
                $('#edisplacement').append(data.data.eDisplacement);
                $('#einlet').append(data.data.eInlet);
                $('#ectype').append(data.data.eCtype);
                $('#ecnum').append(data.data.eCnum);
            }
        })
    }

    function getGearbox(gId) {
        $.ajax({
            type: 'post',
            url: '/forum/gearbox/selectGearboxById',
            dataType: 'json',
            data: {gId: gId},
            success: function (data) {
                console.log(data);
                $('#gName').append(data.data.gName);
                $('#gType').append(data.data.gType);
                $('#gNum').append(data.data.gNum);
            }
        })
    }

    function main() {
        window.location.href = "../../3_main/3_main.html";
    }

    function car() {
        window.location.href = "car.jsp";
    }

    var Main = {
        data() {
            return {}
        }
    };
    var Ctor = Vue.extend(Main);
    new Ctor().$mount('#main');//element组件不起作用,实例化Vue,需要手动挂载
    getCar();
</script>
</html>
